<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单商品预测分析</title>
    <link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='fontawesome.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='inter.css') }}" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07);
            --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.1);
            --border-radius: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding-top: 5rem;
        }
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: var(--shadow-light);
        }
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .nav-link {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }
        .nav-link:hover { transform: translateY(-2px); }
        .hero-section {
            background: var(--primary-gradient);
            color: white;
            padding: 3rem 0;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }
        .hero-content { position: relative; z-index: 2; }
        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(10px);
            margin-bottom: 2rem;
        }
        .card-header {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 1.2rem 1.5rem;
            font-weight: 600;
            font-size: 1.2rem;
            letter-spacing: 1px;
        }
        .card-body { padding: 2rem; }
        .upload-area {
            border: 2px dashed #e0e6ed;
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            background: #f8f9fa;
            transition: var(--transition);
        }
        .upload-area:hover {
            border-color: #667eea;
            background: #f0f4ff;
        }
        .form-label { font-weight: 600; }
        .btn-primary {
            background: var(--primary-gradient);
            border: none;
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 600;
            transition: var(--transition);
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-heavy);
        }
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .kpi-item {
            text-align: center;
            padding: 1rem 0.5rem;
            background: rgba(102, 126, 234, 0.07);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        .kpi-value {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
        }
        .kpi-label {
            font-size: 0.95rem;
            font-weight: 500;
            color: #555;
        }
        .trend-img {
            max-width: 100%;
            border-radius: 15px;
            box-shadow: var(--shadow-medium);
            margin-bottom: 1.5rem;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .table-container {
            background: rgba(255,255,255,0.98);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            padding: 1.5rem 1rem;
            margin-bottom: 2rem;
            width: 1800px;
            margin-left: auto;
            margin-right: auto;
        }
        .table-responsive.mb-3 {
            width: 1800px;
            margin-left: auto;
            margin-right: auto;
            overflow-x: visible !important;
        }
        .card.fade-in-up {
            width: 1800px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            transform: translateX(-350px);
        }
        .table {
            border-radius: 15px;
            overflow: hidden;
            background: white;
            font-size: 0.97rem;
            width: 100%;
            table-layout: auto;
        }
        .table thead th {
            background: var(--primary-gradient);
            color: white;
            font-weight: 600;
            border-top: none;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            padding: 0.6rem 0.5rem;
            font-size: 1rem;
            min-width: 80px;
        }
        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #f5f7fa;
        }
        .table-hover > tbody > tr:hover {
            background-color: #e9edfa;
        }
        .table tbody td {
            padding: 0.6rem 0.5rem;
            font-size: 0.97rem;
        }
        .fw-bold { font-weight: 700 !important; }
        .summary-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            box-shadow: var(--shadow-light);
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
        }
        .summary-card .summary-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .summary-card .summary-value {
            font-size: 2rem;
            font-weight: 700;
        }
        @media (max-width: 768px) {
            .card-body { padding: 1rem; }
            .summary-card { padding: 1rem; }
        }
        /* 针对特定表格列加宽 */
        .table th.phase-col, .table td.phase-col { min-width: 90px; }
        .table th.date-col, .table td.date-col { min-width: 120px; }
        .table th.suggestion-col, .table td.suggestion-col { min-width: 140px; }
        .table th.orderqty-col, .table td.orderqty-col { min-width: 120px; }
        .table th.return-col, .table td.return-col { min-width: 130px; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-chart-line me-2"></i>AI库存预测
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="{{ url_for('index') }}">
                    <i class="fas fa-home me-1"></i>返回主页
                </a>
                <a class="nav-link" href="{{ url_for('manual') }}">
                    <i class="fas fa-book me-1"></i>使用说明
                </a>
            </div>
        </div>
    </nav>
    <!-- 英雄区 -->
    <div class="hero-section">
        <div class="container hero-content">
            <h1 class="display-5 mb-2 fade-in-up">
                <i class="fas fa-magic me-3"></i>单商品未来需求预测分析
            </h1>
            <p class="lead mb-3 fade-in-up-delay-1">上传单商品数据，智能分析未来需求趋势与模型表现</p>
        </div>
    </div>
    <div class="container" style="margin-top: -80px; position:relative; z-index: 10;">
        <div class="row g-4 justify-content-center">
            <div class="col-lg-10">
                <div class="card fade-in-up">
                    <div class="card-header"><i class="fas fa-cogs me-2"></i>上传与预测参数</div>
                    <div class="card-body">
                        {% with messages = get_flashed_messages() %}
                          {% if messages %}
                            <div class="alert alert-warning mt-2">
                              {% for message in messages %}
                                <div>{{ message }}</div>
                              {% endfor %}
                            </div>
                          {% endif %}
                        {% endwith %}
                        <form method="post" enctype="multipart/form-data" class="row g-3 mb-4 justify-content-center">
                            <!-- 文件上传独占一行 -->
                            <div class="col-12">
                                <label class="form-label">上传单商品销售数据文件</label>
                                <div class="input-group">
                                  <label for="file" id="file-label" class="btn btn-outline-secondary">选择文件</label>
                                  <input type="file" class="d-none" id="file" name="file" accept=".csv,.xlsx,xls">
                                  <span id="file-status" class="form-control bg-white" style="border-left:0;">{% if uploaded_filename %}已上传文件：{{ uploaded_filename }}{% else %}未选择文件{% endif %}</span>
                                </div>
                                <div class="upload-hint mt-2 text-muted small">
                                    支持CSV/Excel，需包含 <b>"统计日期"</b> 和 <b>"支付件数"</b> 字段。
                                </div>
                                <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                  var fileInput = document.getElementById('file');
                                  var fileStatus = document.getElementById('file-status');
                                  var fileLabel = document.getElementById('file-label');
                                  fileLabel.addEventListener('click', function(e) {
                                    e.preventDefault();
                                    fileInput.click();
                                  });
                                  fileInput.addEventListener('change', function() {
                                    if (fileInput.files.length > 0) {
                                      fileStatus.textContent = '已上传文件：' + fileInput.files[0].name;
                                    } else {
                                      // 不自动变回未选择文件，始终保持session传递的文件名
                                      // fileStatus.textContent = '未选择文件';
                                    }
                                  });
                                });
                                </script>
                            </div>
                            <!-- 第一行：预测天数、当前库存、备货周期 -->
                            <div class="col-md-4 col-lg-4">
                                <label for="days" class="form-label">售卖天数</label>
                                <input type="number" class="form-control" id="days" name="days" min="1" max="90" value="{{ params.days }}">
                            </div>


                            <div class="col-md-4 col-lg-4">
                                <label for="peak_start" class="form-label">爆发期开始</label>
                                <input type="date" class="form-control" id="peak_start" name="peak_start" value="{{ params.peak_start }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="decline_start" class="form-label">衰退期开始</label>
                                <input type="date" class="form-control" id="decline_start" name="decline_start" value="{{ params.decline_start }}">
                            </div>


                            <div class="col-md-4 col-lg-4">
                                <label for="stock_inventory" class="form-label">现货库存</label>
{#                                <input type="number" class="form-control" id="current_stock" name="current_stock" min="0" value="{{ params.current_stock }}">#}
                                <input type="number" class="form-control" id="stock_inventory" name="stock_inventory" value="{{ params.stock_inventory }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="procurement_transit" class="form-label">采购在途</label>
{#                                <input type="number" class="form-control" id="current_stock" name="current_stock" min="0" value="{{ params.current_stock }}">#}
                                <input type="number" class="form-control" id="procurement_transit" name="procurement_transit" value="{{ params.procurement_transit }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="procurement_arrived_date" class="form-label">采购在途到货日期</label>
                                <input type="date" class="form-control" id="procurement_arrived_date" name="procurement_arrived_date" value="{{ params.procurement_arrived_date }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="lead_time" class="form-label">备货周期(天)</label>
                                <input type="number" class="form-control" id="lead_time" name="lead_time" min="1" max="60" value="{{ params.lead_time }}">
                            </div>
                            <!-- 第二行：退货周期、安全库存系数、退货率 -->
                            <div class="col-md-4 col-lg-4">
                                <label for="return_time" class="form-label">退货周期(天)</label>
                                <input type="number" class="form-control" id="return_time" name="return_time" min="1" max="60" value="{{ params.return_time }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="incremental_activity" class="form-label">预估活动增量</label>
                                <input type="number" class="form-control" id="incremental_activity" name="incremental_activity" min="0" value="{{ params.incremental_activity }}">
                            </div>
{#                            <div class="col-md-4 col-lg-4">#}
{#                                <label for="safety_factor" class="form-label">安全库存系数</label>#}
{#                                <input type="number" step="0.01" class="form-control" id="safety_factor" name="safety_factor" min="1" max="3" value="{{ params.safety_factor }}">#}
{#                            </div>#}
                            <div class="col-md-4 col-lg-4">
                                <label for="only_return_rate" class="form-label">仅退款率</label>
                                <input type="number" step="0.01" class="form-control" id="only_return_rate" name="only_return_rate" min="0" max="1" value="{{ params.only_return_rate }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="shipment_return_rate" class="form-label">发货退款率</label>
                                <input type="number" step="0.01" class="form-control" id="shipment_return_rate" name="shipment_return_rate" min="0" max="1" value="{{ params.shipment_return_rate }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="activity_impact" class="form-label">过去时间段活动影响率</label>
                                <input type="number" step="0.01" class="form-control" id="activity_impact" name="activity_impact" min="-1" max="1" value="{{ params.activity_impact }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="activity_start" class="form-label">活动开始日期</label>
                                <input type="date" class="form-control" id="activity_start" name="activity_start" value="{{ params.activity_start }}">
                            </div>
                            <div class="col-md-4 col-lg-4">
                                <label for="activity_end" class="form-label">活动结束日期</label>
                                <input type="date" class="form-control" id="activity_end" name="activity_end" value="{{ params.activity_end }}">
                            </div>
                            <div class="col-12 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-chart-line me-1"></i> 开始预测
                                </button>
                            </div>
                        </form>
                        {% if product_info %}
                        <hr>
                        <h5 class="mb-2"><i class="fas fa-info-circle me-1"></i>商品信息</h5>
                        <ul class="list-group list-group-flush mb-2">
                            <li class="list-group-item">商品ID：{{ product_info['商品ID'] }}</li>
                            <li class="list-group-item">货号ID：{{ product_info['货号ID'] }}</li>
                            <li class="list-group-item">商品名称：{{ product_info['商品名称'] }}</li>
                            <li class="list-group-item">数据区间：{{ product_info['数据区间'] }}</li>
                            <li class="list-group-item">总记录数：{{ product_info['总记录数'] }}</li>
                        </ul>
                        {% endif %}
                        {% if show_result %}
{#                        {% if metrics %}#}
{#                        <div class="kpi-grid mb-3">#}
{#                            <div class="kpi-item">#}
{#                                <div class="kpi-value">{{ metrics['R2'] }}</div>#}
{#                                <div class="kpi-label">R²</div>#}
{#                            </div>#}
{#                            <div class="kpi-item">#}
{#                                <div class="kpi-value">{{ metrics['MAE'] }}</div>#}
{#                                <div class="kpi-label">MAE</div>#}
{#                            </div>#}
{#                            <div class="kpi-item">#}
{#                                <div class="kpi-value">{{ metrics['RMSE'] }}</div>#}
{#                                <div class="kpi-label">RMSE</div>#}
{#                            </div>#}
{#                            <div class="kpi-item">#}
{#                                <div class="kpi-value">{{ metrics['MAPE'] }}</div>#}
{#                                <div class="kpi-label">MAPE</div>#}
{#                            </div>#}
{#                        </div>#}
{#                        {% endif %}#}
                        {% if summary %}
                        <div class="alert alert-info mb-3">
                            <b>汇总：</b> 预测期总需求 <b>{{ summary.total_demand }}</b>，建议补货总量 <b>{{ summary.total_orders }}</b>。
                        </div>
                        {% endif %}
                        
                        <!-- 导出按钮 -->
                        <div class="text-end mb-3">
                            <form method="POST" action="{{ url_for('export_single_predict_results') }}" style="display: inline;">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-download me-2"></i>导出预测结果
                                </button>
                            </form>
                        </div>
                        
                        {% if plot_url %}
                        <img src="{{ plot_url }}" class="trend-img" alt="趋势图">
                        {% endif %}
                        <div class="table-responsive mb-3">
                            <table class="table table-bordered table-hover align-middle text-center">
                                <thead>
                                    <tr>
                                        <th class="phase-col">阶段</th>
                                        <th class="date-col">日期</th>
                                        <th>预测需求</th>
                                        <th>仅退款数</th>
                                        <th>实际需求</th>
                                        <th>售前库存</th>
                                        <th>售后库存</th>
                                        <th>安全库存</th>
                                        <th>库存状态</th>
                                        <th class="suggestion-col">备货建议</th>
                                        <th class="orderqty-col">备货到仓数</th>
                                        <th class="return-col">当日退货到仓数</th>
                                        <th class="return-col">在途库存</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in table %}
                                    <tr>
                                        <td class="phase-col">
                                        {% if row.phase == 'rising' %}
                                        <span class="phase-badge-rising-phase">
                                          <i class="fas fa-arrow-up"></i> {{ row.phase_name }}
                                        </span>
                                      {% elif row.phase == 'peak' %}
                                        <span class="phase-badge-peak-phase">
                                          <i class="fas fa-fire"></i> {{ row.phase_name }}
                                        </span>
                                      {% else %}
                                        <span class="phase-badge-decline-phase">
                                          <i class="fas fa-arrow-down"></i> {{ row.phase_name }}
                                        </span>
                                      {% endif %}
                                        </td>
                                        <td class="date-col">{{ row['date'] }}</td>
                                        <td>{{ row['predicted_demand'] }}</td>
                                        <td>{{ row['only_return_num'] }}</td>
                                        <td>{{ row['real_demand'] }}</td>
                                        <td>{{ row['stock_before'] }}</td>
                                        <td>{{ row['stock_after'] }}</td>
                                        <td>{{ row['safety_stock'] }}</td>
                                        <td>{{ row['status'] }}</td>
                                        <td class="suggestion-col">{{ row['suggestion'] }}</td>
                                        <td class="orderqty-col">{{ row['delivery_arrived'] }}</td>
                                        <td class="return-col">
{#                                            {{ row['return_generated'] }},#}
                                            {{ row['return_arrived'] }}</td>
                                        <td class="return-col">
                                            {{ row['stock_on_order'] }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"></script>
</html> 